<template>
  <div class="info-content">
    <div class="page-main-title">通道配置</div>

    <div class="page-top-action">
      <div class="search-box">
        <el-input placeholder="请输入通道名称" size="small" v-model.trim="searchVal" clearable>
          <template slot="prepend">通道名称</template>
        </el-input>
        <!-- <el-button type="primary" size="small">查 询</el-button> -->
      </div>
      <div class="action" v-if="isPermmited('PARK:CONFIG:MANAGE:CHANNEL:UPDATE')">
        <el-button
          type="primary"
          plain
          size="small"
          class="ake_btn_text"
          @click="addChannelDialogShow"
        >新增通道</el-button>
        <el-button
          type="primary"
          plain
          size="small"
          class="ake_btn_text"
          @click="$router.push({ name: 'tideChannelList', query: $route.query })"
        >潮汐通道配置</el-button>
        <el-button
          type="primary"
          class="ake_btn_text"
          plain
          size="small"
          @click="downloadChannelCode"
        >下载通道编码</el-button>
      </div>
    </div>
    <div class="info-main-content">
      <el-table
        :data="searchVal ? filterSearchChannelList : channelList"
        size="mini"
        border
        style="width: 100%"
      >
        <el-table-column prop="entranceName" label="通道名称" width="180"></el-table-column>
        <el-table-column prop="customCode" label="通道编码" width="180"></el-table-column>
        <el-table-column prop="address" label="启用状态" :formatter="formatEnable"></el-table-column>
        <el-table-column label="操作" v-if="isPermmited('PARK:CONFIG:MANAGE:CHANNEL:UPDATE')">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              plain
              icon="icon-edit"
              class="ake-icon-font"
              title="编辑"
              @click="editChannelName(scope.row)"
            ></el-button>
            <el-button
              size="small"
              type="primary"
              icon="icon-more"
              class="ake-icon-font"
              title="详细设置"
              plain
              @click="setChannelMoreDetail(scope.row)"
            ></el-button>
            <el-button
              size="small"
              type="primary"
              icon="icon-screen"
              class="ake-icon-font"
              title="静态屏显"
              plain
              @click="setScreenSetting(scope.row)"
            ></el-button>
            <el-button
              size="small"
              type="primary"
              icon="icon-brightness"
              class="ake-icon-font"
              title="屏幕亮度"
              plain
              @click="setScreenBrightnessSetting(scope.row)"
            ></el-button>
            <el-button
              size="small"
              type="primary"
              icon="icon-broadcast"
              class="ake-icon-font"
              title="语音播报"
              plain
              @click="setVoiceSetting(scope.row)"
            ></el-button>
            <el-button
              v-if="scope.row.enable"
              size="small"
              type="primary"
              icon="icon-lock"
              class="ake-icon-font"
              title="禁用"
              plain
              @click="setChannelStatus(scope.row)"
            ></el-button>
            <el-button
              v-if="!scope.row.enable"
              size="small"
              type="primary"
              icon="icon-unlock_normal"
              class="ake-icon-font"
              title="启用"
              plain
              @click="setChannelStatus(scope.row)"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              plain
              icon="icon-delete"
              class="ake-icon-font"
              title="删除"
              @click="removeChannel(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- dialog start-->
    <!-- 详细设置 -->
    <el-dialog
      :title="`详细设置-${curEditChannelItem.entranceName}`"
      :visible.sync="dialogSetting.moreDetailDialogVisible"
      width="800px"
      class="zb-dialog"
      v-if="curEditChannelItem"
    >
      <div class="zb-dialog-bd">
        <el-form size="small" label-position="left" class="moreDetailDialogVisible-form">
          <!-- 入口 -->
          <template v-if="curEditChannelItem.entranceType === 1">
            <el-form-item label="网络工作模式" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.deviceNetModel">
                <el-radio :label="2">双网</el-radio>
                <el-radio :label="1">4G</el-radio>
                <el-radio :label="0">有线</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="临时车" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.normalCarPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="VIP" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.localVipCarPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="多位多车VIP转临时车" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.dynamicVipToNormalMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="无通道权限VIP转临时车" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.noChannelMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="无牌车" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.noPlatePassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
                <el-radio :label="3">自助进出</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="访客" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.visitorListPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="白名单" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.redListPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="黑名单" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.blacklistPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="非系统开闸上报进场" label-width="230px" style="position: relative">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">能抓拍到车牌的非系统开闸记录列入正常进场</div>>
                <i
                  class="el-icon-question question-icon"
                  style="position: absolute; left: -98px; top: 8px; font-size: 17px; color: #C2C2C2;"
                ></i>
              </el-tooltip>
              <el-radio-group v-model="curEditChannelItem.abnormalOpenGateUploadRecordFlag">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>

          <!-- 出口 -->
          <template v-if="curEditChannelItem.entranceType === 2">
            <el-form-item label="网络工作模式" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.deviceNetModel">
                <el-radio :label="2">双网</el-radio>
                <el-radio :label="1">4G</el-radio>
                <el-radio :label="0">有线</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="临时车" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.normalCarPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="临时车无在场" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.normalNoRecordPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="VIP" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.localVipCarPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="VIP无在场" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.vipNotInPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="无牌车" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.noPlatePassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
                <el-radio :label="3">自助进出</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="访客" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.visitorListPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="白名单" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.redListPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="黑名单" label-width="230px">
              <el-radio-group v-model="curEditChannelItem.blacklistPassMode">
                <el-radio :label="2">自动放行</el-radio>
                <el-radio :label="1">人工验证放行</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="非系统开闸上报离场" label-width="230px" style="position: relative">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">能抓拍到车牌的非系统开闸记录列入正常离场</div>>
                <i
                  class="el-icon-question question-icon"
                  style="position: absolute; left: -98px; top: 8px; font-size: 17px; color: #C2C2C2;"
                ></i>
              </el-tooltip>
              <el-radio-group v-model="curEditChannelItem.abnormalOpenGateUploadRecordFlag">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </template>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="submitChannelDetail">确 定</el-button>
        <el-button size="medium" plain @click="dialogSetting.moreDetailDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 屏显设置 -->
    <el-dialog
      :title="`静态屏显-${curEditChannelItem.entranceName}`"
      :visible.sync="dialogSetting.screenEditDailogVisible"
      width="560px"
      class="zb-dialog"
      v-if="curEditChannelItem"
    >
      <div class="zb-dialog-bd screen-setting">
        <!-- 单选组 -->
        <div class="screen-setting-type-wrap">
          <el-radio-group v-model="curEditChannelItem.displayType">
            <el-radio :label="0">纯文本配置</el-radio>
            <el-radio :label="1">LED图文显示</el-radio>
            <el-radio :label="2">LCD图文显示</el-radio>
          </el-radio-group>
          <div class="screen-setting-tips">
            <div class="tips-item">不支持图片显示</div>
            <div class="tips-item">图片支持64*64px</div>
            <div class="tips-item">图片支持1080*1920px</div>
          </div>
        </div>
        <div class="screen-setting-top">
          <div class="tips">* 共显示{{ curEditChannelItem.displayType === 0 ? '4' : '3' }}行内容，可选填</div>
          <div class="screen-direction" v-if="curEditChannelItem.displayType === 0">
            <el-switch
              v-model="curEditChannelItem.displayViewModel"
              active-text="竖显"
              inactive-text="横显"
              :active-value="1"
              :inactive-value="0"
              inactive-color="#5995d8"
              active-color="#13ce66"
            ></el-switch>
          </div>
        </div>
        <!-- 纯文本配置 -->
        <div class="screen-list" v-if="curEditChannelItem.displayType === 0">
          <div
            class="screen-list-item"
            v-for="(sitem, sindex) in curEditChannelItem.uiOpt.displayDefaultArray"
          >
            <div class="cell-num">第{{ numberToCN[sindex + 1] }}行</div>
            <div class="screen-bd">
              <span v-for="pitem in sitem">{{ pitem.previewText }}</span>
            </div>
            <a
              href="javascript:;"
              class="edit-icon"
              @click="editScreenShow(sitem, curEditChannelItem, curEditChannelItem.uiOpt.displayDefaultArray, sindex)"
            >编辑</a>
          </div>
        </div>

        <div class="screen-list" v-if="curEditChannelItem.displayType === 1">
          <div
            class="screen-list-item"
            v-for="(sitem, sindex) in curEditChannelItem.uiOpt.displayLEDArray"
          >
            <div class="cell-num">第{{ numberToCN[sindex + 1] }}行</div>
            <div class="screen-bd">
              <template v-if="sindex < 2">
                <span v-for="pitem in sitem">{{ pitem.previewText }}</span>
              </template>
              <template v-else-if="sitem.length && sitem.key !== '%PTQR'">
                <img :src="imgUrlPrefix + item" alt v-for="item in sitem[0].images" />
              </template>
            </div>
            <a
              href="javascript:;"
              class="edit-icon"
              @click="editScreenShow(sitem, curEditChannelItem, curEditChannelItem.uiOpt.displayLEDArray, sindex)"
              v-if="sindex < 2"
            >编辑</a>

            <a
              href="javascript:;"
              class="edit-icon"
              @click="editScreenImg(sitem)"
              v-if="sindex === 2"
            >编辑</a>
          </div>
        </div>

        <div class="screen-list" v-if="curEditChannelItem.displayType === 2">
          <div
            class="screen-list-item"
            v-for="(sitem, sindex) in curEditChannelItem.uiOpt.displayLCDArray"
          >
            <div class="cell-num">第{{ numberToCN[sindex + 1] }}行</div>
            <div class="screen-bd">
              <template v-if="sindex < 2">
                <span v-for="pitem in sitem">{{ pitem.previewText }}</span>
              </template>
              <template v-else-if="sitem.length">
                <img :src="imgUrlPrefix + item" alt v-for="item in sitem[0].images" />
              </template>
            </div>

            <a
              href="javascript:;"
              class="edit-icon"
              @click="editScreenShow(sitem, curEditChannelItem, curEditChannelItem.uiOpt.displayLCDArray, sindex)"
              v-if="sindex < 2"
            >编辑</a>

            <a
              href="javascript:;"
              class="edit-icon"
              @click="editScreenImg(sitem)"
              v-if="sindex === 2"
            >编辑</a>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="setChannelDisplay">确 定</el-button>
        <el-button size="medium" plain @click="dialogSetting.screenEditDailogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="`静态屏显-${curEditChannelItem.entranceName}`"
      :visible.sync="dialogSetting.screenEditDetailDailogVisible"
      width="560px"
      class="zb-dialog"
      v-if="curEditChannelItem"
    >
      <div class="srceen-setting-content">
        <div class="srceen-setting-content-title">第{{ numberToCN[curEditScreenIndex + 1] }}行屏显效果预览</div>
        <div
          class="screen-preview"
          v-if="curEditChannelItem && curEditChannelItem.displayType == 0"
        >
          <span v-for="item in curEditScreenItem">{{ item.previewText }}</span>
        </div>
        <div
          class="screen-preview"
          v-if="curEditChannelItem && curEditChannelItem.displayType == 1"
          :style="{ color: curEditChannelItem.uiOpt.LEDFontColorArray[curEditScreenIndex] }"
        >
          <span v-for="item in curEditScreenItem">{{ item.previewText }}</span>
        </div>
        <div
          class="screen-preview"
          v-if="curEditChannelItem && curEditChannelItem.displayType == 2"
          :style="{ color: curEditChannelItem.uiOpt.LCDFontColorArray[curEditScreenIndex] }"
        >
          <span v-for="item in curEditScreenItem">{{ item.previewText }}</span>
        </div>
        <div class="srceen-setting-content-title">当前静态屏显</div>
        <div class="screen-edit-pre">
          <template v-for="(item, index) in curEditScreenItem">
            <div class="pre-item" v-if="item.text !== 'userText'">
              {{ item.text }}
              <i class="el-icon el-icon-close" @click="delTag(index)"></i>
            </div>
            <div class="pre-item-constom" v-if="item.text === 'userText'">
              {{ item.key }}
              <i class="el-icon el-icon-close" @click="delTag(index)"></i>
            </div>
          </template>
        </div>
        <div class="srceen-setting-content-title">可选标签</div>
        <div class="tags">
          <div
            class="tag-item"
            v-for="item in defaultScreenSetting"
            @click="addTagToScreenShow(item)"
          >{{ item.text }}</div>
        </div>
        <div class="srceen-setting-content-title">自定义标签</div>
        <div class="custom-input">
          <el-input placeholder="请输入自定义内容" :maxlength="10" v-model.trim="userScreenText">
            <template slot="append">
              <i class="el-icon-plus"></i>
              <div class="inputBtn" @click="addUserScreenText"></div>
            </template>
          </el-input>
        </div>
        <div
          class="srceen-setting-content-title"
          v-if="curEditChannelItem && curEditChannelItem.displayType !== 0"
        >文字颜色</div>

        <div
          class="color-list-box"
          v-if="curEditChannelItem && curEditChannelItem.displayType === 1"
        >
          <a
            class="color-item"
            href="javascript:;"
            v-for="(item, index) in colorList"
            :key="index"
            :style="{ 'background-color': item }"
            :class="{
              'has-border': item === '#FFFFFF',
              active: curEditChannelItem.uiOpt.LEDFontColorArray[curEditScreenIndex] === item
            }"
            @click="handleChangeTheme(curEditChannelItem.uiOpt.LEDFontColorArray, curEditScreenIndex, item)"
          ></a>
        </div>

        <div v-if="curEditChannelItem && curEditChannelItem.displayType === 2">
          <el-color-picker v-model="curEditChannelItem.uiOpt.LCDFontColorArray[curEditScreenIndex]"></el-color-picker>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="confirmScreen">确 定</el-button>
        <el-button
          size="medium"
          plain
          @click="dialogSetting.screenEditDetailDailogVisible = false"
        >取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="静态屏显"
      :visible.sync="dialogSetting.editScreenListdialogVisible"
      width="540px"
      class="zb-dialog"
    >
      <div class="srceen-setting-content">
        <div>
          <el-upload
            class="avatar-uploader"
            action
            :on-change="handleEditScreenImgListChange"
            :on-remove="handleEditScreenListRemove"
            list-type="picture"
            :file-list="editScreenImgList"
            :auto-upload="false"
            :limit="4"
          >
            <el-button size="small" type="primary">选择图片</el-button>
            <div slot="tip" class="el-upload__tip upload-require" v-if="curEditChannelItem">
              <h5>上传文件要求：</h5>
              <p v-if="curEditChannelItem.displayType === 1">
                <span>1.请上传jpg文件，大小不超过200kb</span>
                <span>2.尺寸：64*64px</span>
                <span>3.最多上传 4 张图片</span>
              </p>

              <p v-if="curEditChannelItem.displayType === 2">
                <span>1.请上传jpg文件，大小不超过2M</span>
                <span>2.尺寸：1080*1920px</span>
                <span>3.最多上传 4 张图片</span>
              </p>
            </div>
          </el-upload>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="saveScreenListChange">确 定</el-button>
        <el-button
          size="medium"
          plain
          @click="dialogSetting.editScreenListdialogVisible = false"
        >取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="新增通道"
      :visible.sync="dialogSetting.addChannelDailogVisible"
      width="560px"
      class="zb-dialog full-select"
    >
      <div class="dialog-content">
        <el-form
          ref="createChannelInitData"
          :model="createChannelInitData"
          size="small"
          class="zb-form-dialog"
          label-position="left"
          label-width="90px"
          style="width: 410px; margin-left: 25px; margin-bottom: 10px; margin-top: 10px; overflow: hidden"
        >
          <el-form-item
            label="通道名称"
            prop="entranceName"
            :rules="{ required: true, validator: checkChannel, trigger: 'blur' }"
          >
            <el-input
              placeholder="请输入通道名称"
              clearable
              v-model.trim="createChannelInitData.entranceName"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="通道类型"
            prop="entranceType"
            :rules="{
              required: true,
              message: '请选择通道类型',
              trigger: 'change'
            }"
          >
            <el-select placeholder="请选择通道类型" v-model="createChannelInitData.entranceType">
              <el-option label="入口" :value="1"></el-option>
              <el-option label="出口" :value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="启用状态">
            <el-radio-group
              v-model="createChannelInitData.enable"
              prop="enable"
              :rules="{
                required: true,
                message: '请选择启用状态',
                trigger: 'blur'
              }"
            >
              <el-radio :label="true">启用</el-radio>
              <el-radio :label="false">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="createChannel">确 定</el-button>
        <el-button size="medium" plain @click="dialogSetting.addChannelDailogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="`编辑通道-${curEditChannelItem.entranceName}`"
      :visible.sync="dialogSetting.editChannelDailogVisible"
      width="560px"
      class="zb-dialog full-select"
      v-if="curEditChannelItem"
    >
      <div class="dialog-content">
        <el-form
          ref="curEditChannelItem"
          :model="curEditChannelItem"
          size="small"
          class="zb-form-dialog"
          label-position="left"
          label-width="90px"
          style="width: 410px; margin-left: 25px; margin-bottom: 10px; margin-top: 10px;"
        >
          <el-form-item
            label="通道名称"
            prop="entranceName"
            :rules="{ required: true, validator: checkChannel, trigger: 'blur' }"
          >
            <el-input placeholder="请输入通道名称" clearable v-model="curEditChannelItem.entranceName"></el-input>
          </el-form-item>
          <el-form-item label="通道编码">{{ curEditChannelItem.customCode }}</el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="submitEditChannelName">确 定</el-button>
        <el-button size="medium" plain @click="dialogSetting.editChannelDailogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="`语音播报-${curEditChannelItem.entranceName}`"
      :visible.sync="dialogSetting.voiceEditDailogVisible"
      width="660px"
      class="zb-dialog"
      v-if="curEditChannelItem"
    >
      <div class="dialog-content">
        <el-form
          ref="curEditChannelItem"
          :model="curEditChannelItem"
          size="small"
          class="zb-form-dialog"
          label-position="left"
          label-width="90px"
          style="width: 410px; margin-left: 25px; margin-bottom: 10px; margin-top: 10px;"
        >
          <div class="voice-date-item">
            <el-form-item label="语音播报">
              <el-time-picker
                value-format="HH:mm"
                format="HH:mm"
                :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                placeholder="开始时间"
                v-model="curEditChannelItem.timeArray[0]"
              ></el-time-picker>
            </el-form-item>
            <span
              class="unit"
              style="margin-right: 9px;margin-left: 10px;margin-top: 9px; font-size: 12px"
            >至</span>
            <el-form-item label label-width="0">
              <el-time-picker
                value-format="HH:mm"
                format="HH:mm"
                :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                placeholder="结束时间"
                v-model="curEditChannelItem.timeArray[1]"
              ></el-time-picker>
            </el-form-item>
          </div>
          <el-form-item label="音量" class="voice-item">
            <el-slider :min="0" :max="100" v-model="curEditChannelItem.deviceVolume"></el-slider>
            <span class="unit">{{ curEditChannelItem.deviceVolume }}</span>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="submitChannelVoice">确 定</el-button>
        <el-button size="medium" plain @click="dialogSetting.voiceEditDailogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="`屏幕亮度配置-${curEditChannelItem.entranceName}`"
      :visible.sync="dialogSetting.screenEditScreenBrightnessDailogVisible"
      width="615px"
      class="zb-dialog"
      v-if="curEditChannelItem"
    >
      <div class="dialog-content">
        <div class="screenBrightness-tips">
          <span class="tips-tag">推荐</span>
          LED屏（白天 70% 夜晚 100%）
          <el-button type="text" @click="setEDBrightness">应用</el-button>, LCD屏（白天 30%
          夜晚 50%）
          <el-button type="text" style="margin-left: 0" @click="setLCDBrightness">应用</el-button>
        </div>

        <el-form
          size="small"
          class="zb-form-dialog"
          label-position="left"
          label-width="60px"
          style="width: 440px; margin-left: 25px; margin-bottom: 10px; margin-top: 10px;"
        >
          <div class="screenBrightness-setting-item">
            <div class="title">白天</div>
            <div class="voice-date-item">
              <el-form-item label="时间">
                <el-time-picker
                  value-format="HH:mm"
                  format="HH:mm"
                  :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                  placeholder="开始时间"
                  v-model="curEditChannelItem.uiOpt.screenBrightness.startSetting.timeArray[0]"
                  @change="screenBrightnessLightStartTimeChange"
                ></el-time-picker>
              </el-form-item>
              <span
                class="unit"
                style="margin-right: 9px;margin-left: 10px;margin-top: 9px; font-size: 12px"
              >至</span>
              <el-form-item label label-width="0">
                <el-time-picker
                  value-format="HH:mm"
                  format="HH:mm"
                  :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                  placeholder="结束时间"
                  v-model="curEditChannelItem.uiOpt.screenBrightness.startSetting.timeArray[1]"
                  @change="screenBrightnessLightEndTimeChange"
                ></el-time-picker>
              </el-form-item>
            </div>
            <el-form-item label="亮度" class="voice-item">
              <el-slider
                :min="1"
                :max="100"
                v-model="curEditChannelItem.uiOpt.screenBrightness.startSetting.brightness"
              ></el-slider>
              <span
                class="unit"
              >{{ curEditChannelItem.uiOpt.screenBrightness.startSetting.brightness }}%</span>
            </el-form-item>
          </div>

          <div class="screenBrightness-setting-item">
            <div class="title">夜晚</div>
            <div class="voice-date-item">
              <el-form-item label="时间">
                <el-time-picker
                  value-format="HH:mm"
                  format="HH:mm"
                  :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                  placeholder="开始时间"
                  v-model="curEditChannelItem.uiOpt.screenBrightness.endSetting.timeArray[0]"
                  @change="screenBrightnessDarkStartTimeChange"
                ></el-time-picker>
              </el-form-item>
              <span
                class="unit"
                style="margin-right: 9px;margin-left: 10px;margin-top: 9px; font-size: 12px"
              >至</span>
              <el-form-item label label-width="0">
                <el-time-picker
                  value-format="HH:mm"
                  format="HH:mm"
                  :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }"
                  placeholder="结束时间"
                  v-model="curEditChannelItem.uiOpt.screenBrightness.endSetting.timeArray[1]"
                  @change="screenBrightnessDarkEndTimeChange"
                ></el-time-picker>
              </el-form-item>
            </div>
            <el-form-item label="亮度" class="voice-item">
              <el-slider
                :min="1"
                :max="100"
                v-model="curEditChannelItem.uiOpt.screenBrightness.endSetting.brightness"
              ></el-slider>
              <span
                class="unit"
              >{{ curEditChannelItem.uiOpt.screenBrightness.endSetting.brightness }}%</span>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="setChannelScreenBrightness">确 定</el-button>
        <el-button
          size="medium"
          plain
          @click="dialogSetting.screenEditScreenBrightnessDailogVisible = false"
        >取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="快捷配置"
      :visible.sync="dialogSetting.quickSettingDialog"
      width="720px"
      class="zb-dialog full-select"
      v-if="curEditChannelItem"
    >
      <div class="dialog-content quick-setting-dialog" style="margin-left: 22px">
        <p
          class="quick-tips"
        >可将{{ curEditChannelItem.entranceName }}的 “{{ quickSetting.typeName }}” 快速应用到以下通道：</p>
        <div class="search-box">
          <el-input
            placeholder="请输入通道关键字查询"
            clearable
            size="small"
            v-model.trim="quickSetting.searchVal"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>

        <div class="quick-channel-list">
          <div class="all-checkbox">
            <el-checkbox
              :indeterminate="quickSetting.isIndeterminate"
              v-model="quickSetting.checkAll"
              @change="handleQuickChannelsCheckAllChange"
            >全选({{ quickSetting.checkedChannels.length }})</el-checkbox>
          </div>
          <div class="list-bd">
            <el-checkbox-group
              v-model="quickSetting.checkedChannels"
              @change="handleCheckedQuickChannelsChange"
            >
              <template v-if="!quickSetting.searchVal">
                <el-checkbox
                  v-for="item in quickSetting.channelList"
                  :label="item.id"
                  :key="item.id"
                >
                  {{
                  item.entranceName
                  }}
                </el-checkbox>
              </template>

              <template v-if="quickSetting.searchVal">
                <el-checkbox v-for="item in filterQuickChannelList" :label="item.id" :key="item.id">
                  {{
                  item.entranceName
                  }}
                </el-checkbox>
              </template>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="setChannelsSetting">确 定</el-button>
        <el-button size="medium" plain @click="dialogSetting.quickSettingDialog = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- dialog end -->
  </div>
</template>

<script>
import pageScript from "./index.js";
export default pageScript;
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
<style lang="less" scoped>
@import "../../AddParkingLot/AddParkingLotComponents/FormContent.less";
</style>
<style lang="less">
@import "../../../../assets/less/base/zbForm.less";
</style>
<style lang="less" scoped>
@import "../../AddParkingLot/AddParkingLotComponents/ChannelSetting/index.less";

.screen-bd {
  .bitmap {
    width: 90px;
    height: 78px;
  }
}
.channel-list {
  .channel-item {
    .channel-top-cell {
      .show-detail {
        right: 15px;
      }
    }
  }
}
</style>
